<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue1026.js"></script>
</head>
<body>
    <template id="sub">
       <button @click="sendData">提交到父组件数据</button>
    </template>

    <div id="app">
        <sub v-on:send="getData"></sub>
        {{msg}}
    </div>
</body>

<script>
    new Vue({
        el:'#app',
        data:{
            
            msg:''
        },
        methods:{
            getData:function(input){
                this.msg =  input;
                console.log('接受数据')
            },
        },
        components:{
            'sub':{
                template:'#sub',
                
                methods:{
                    sendData:function(){
                        //将子组件 数据提交给父组件
                        console.log('提交数据')
                        this.$emit('send','hello');
                    }
                }
            },

        }
    })

</script>
</html>